<template>
	<div
	class="contener"
	v-loading="loading"
	element-loading-background="rgba(0, 0, 0, 0.8)"
	>
		<div class="top" style="display: flex; justify-content:flex-end ; margin: 10px 2px 15px 0px; color: beige;"><i class="el-icon-location-outline" style="margin-right: 5px;" />{{ text }}</div>
	
		<div class="block">
		 
			
			<el-collapse v-model="activeNames"  
			  >
			  <el-collapse-item title="顶点颜色 Zenith Color" name="1" >
			    
			     <el-color-picker
			     v-model="Acolor[0].index"
			     show-alpha
			     @active-change="Color=>change(Color, 0)"
			    @change="index(0)"
			     :predefine="predefineColors">
			    </el-color-picker>
			  </el-collapse-item>
			  <el-collapse-item title=" 地平线颜色:Horizon Color" name="2">
			    <el-color-picker
			    v-model="Acolor[1].index"
			    show-alpha
			    @active-change="Color=>change(Color, 1)"
			    @change="index(1)"
			    :predefine="predefineColors">
			    </el-color-picker>
			  </el-collapse-item>
			  <el-collapse-item title="云彩 Cloud Color" name="3">
			   <el-color-picker
			   v-model="Acolor[2].index"
			   show-alpha
			   @active-change="Color=>change(Color, 2)"
			   @change="index(2)"
			   :predefine="predefineColors">
			   </el-color-picker>
			  </el-collapse-item>
			  <el-collapse-item title="整体颜色:Overall Color" name="4">
			    <el-color-picker
			    v-model="Acolor[3].index"
			    show-alpha
			    @active-change="Color=>change(Color, 3)"
			    @change="index(3)"
			    :predefine="predefineColors">
			    </el-color-picker>
			  </el-collapse-item>
			  <el-collapse-item title="太阳高度:Sun Height" name="5">
				  <el-slider v-model="value"
				  :min="-1"
				  :max="1"
				  :show-tooltip="false"
				  show-input
				  :step="0.01"
				  @input="changesun()"
				  ></el-slider>
				</el-collapse-item>
				<el-collapse-item title="云层速度 Cloud speed" name="6">
					<el-slider v-model="value1"
					:min="0"
					:max="10"
					:show-tooltip="false"
					show-input
					:step="0.001"
					@input="changecloud()"
					></el-slider>			  
				</el-collapse-item>
				<el-collapse-item title="太阳位置决定的颜色" name="7">
					<el-checkbox v-model="checked"
					@change="sunposition()"
					></el-checkbox>
				</el-collapse-item>
			</el-collapse>
			
			
			
		</div>
	</div>
		
	
	
</template>

<script>

	export default {
		 data() {
		      return {activeNames: [''],
			  loading:true,
			  checked: true,
				
				 Acolor:[
					 {index:''},
					 {index:''},
					 {index:''},
					 {index:''},
				 ],
		        
		        predefineColors: [
		          '#ff4500',
		          '#ff8c00',
		          '#ffd700',
		          '#90ee90',
		          '#00ced1',
		          '#1e90ff',
		          '#c71585',
		          'rgba(255, 69, 0, 0.68)',
		          'rgb(255, 120, 0)',
		          'hsv(51, 100, 98)',
		          'hsva(120, 40, 94, 0.5)',
		          'hsl(181, 100%, 37%)',
		          'hsla(209, 100%, 56%, 0.73)',
		          '#c7158577'
		        ],
				value:-1,
				value1:1 ,
				
			
				
				ObjectPath:"",	  
				Access:"READ_ACCESS",
				Name:[
					{colorname:'Zenith Color'},
					{colorname:'Horizon color'},
					{colorname:'Overall Color'},
					{colorname:'Cloud color'},
					{colorname:'Sun height'},
					{colorname:'Cloud speed'}
					],
					
				Outcolor:[
					{color:{
						R:'',
						G:'',
						B:'',
						A:''}},
					{color:{
						R:'',
						G:'',
						B:'',
						A:''}},
					{color:{
						R:'',
						G:'',
						B:'',
						A:''}},
					{color:{
						R:'',
						G:'',
						B:'',
						A:''}}
						]
					
			,
					
					// {colorname:'Horizon color'},
					// {colorname:'Overall Color'},
					// {colorname:'Cloud color'},
					// {colorname:'Sun height'},
					// {colorname:'Cloud speed'}
					// ],
					
					
				
					text:'BP_Sky_Sphere_2',
					
				
				
				
		      }
		    },
			created(){
				// this.GetBP_SKy_Sphere()
			},
			mounted(){
				
				this.GetBP_SKy_Sphere();
			},
			methods:{
				
				change(Color,item){

						var c = Color;
						var rgb = (c.toString()).replace(/^rgba?\(|\s+|\)$/g,'').split(',');
						this.Outcolor[item].color.R=parseInt(rgb[0]) ;
						this.Outcolor[item].color.G=parseInt(rgb[1]) ;
						this.Outcolor[item].color.B=parseInt(rgb[2]) ;
						this.Outcolor[item].color.A=parseInt(rgb[3]) ;
						// console.log("赋值",this.Outcolor[item].color)
					
					},
					sunposition() {
					       this.axios.put( '/remote/object/property',
					       {
					       		"objectPath" :this.ObjectPath,
					       			"access" :"WRITE_TRANSACTION_ACCESS",
					       			"propertyName" :'Colors determined by sun position',
					       			"propertyValue" :{
										"Colors determined by sun position":this.checked
									}
					       				 
					       	
					       },
					       {
					       	headers:{
					       		'Content-Type': 'application/json'
					       	}
					       }
					       
					       
					       ).then(res =>{
					       				
					       })
					     },
					index(item){
						
						let name = this.Name[item].colorname;
						let json2={
							R: this.Outcolor[item].color.R,
							G: this.Outcolor[item].color.G,
							B: this.Outcolor[item].color.B,
							A: this.Outcolor[item].color.A
						}
						let json ={}
						json[name] =json2
						
							console.log(json)
							this.axios.put( '/remote/object/property',
							{
									"objectPath" :this.ObjectPath,
										"access" :"WRITE_TRANSACTION_ACCESS",
										"propertyName" :this.Name[item].colorname,
										"propertyValue" :json
											 
								
							},
							{
								headers:{
									'Content-Type': 'application/json'
								}
							}
							
							
							).then(res =>{
									console.log(json)		
							})
							
						},
					
					changesun(){
						
						
						if(this.value != -1){
							this.axios.put( '/remote/object/property',
						{
								"objectPath" :this.ObjectPath,
									"access" :"WRITE_TRANSACTION_ACCESS",
									"propertyName" :this.Name[4].colorname,
									"propertyValue" :{
										 "Sun height": this.value
												
							}
						},
						{
							headers:{
								'Content-Type': 'application/json'
							}
						}
						
						
						).then(res =>{
											
						})
						}
						
						
					},
					changecloud(){
						if(this.value1 != 1){
							this.axios.put( '/remote/object/property',
						{
								"objectPath" :this.ObjectPath,
									"access" :"WRITE_TRANSACTION_ACCESS",
									"propertyName" :this.Name[5].colorname,
									"propertyValue" :{
										 "Cloud speed": this.value1
												
							}
						},
						{
							headers:{
								'Content-Type': 'application/json'
							}
						}
						
						
						).then(res =>{
										// console.log(2)
						})
							
						}
						
						
					},
				
				GetBP_SKy_Sphere(){
					this.changeData()
					let path;
					if(this.ObjectPath == ''){
						console.log(this.ObjectPath,'111')
					}else{
						path=this.ObjectPath
						let index2=path.indexOf(this.text)
						if(index2 >0){
							path=this.ObjectPath
						}else{
							path=this.ObjectPath+"."+this.text
						}
						console.log(path)
					}
					
					this.axios.put( '/remote/object/property',
					{
						"ObjectPath":path,
						"Access":this.Access 
					},
					{
						headers:{
							'Content-Type': 'application/json'
						}
					}
					).then((res) =>{
						console.log(res)
						// let ceshi=[]
						// ceshi[0] =  Math.round(res.data[this.Name[0].colorname].R)
						// ceshi[1] =  Math.round(res.data[this.Name[0].colorname].G)
						// ceshi[2] =  Math.round(res.data[this.Name[0].colorname].B)
						// ceshi[3] = 1
						 
						// let zcolor ="rgba("+ceshi.toString()+")"
						// this.color0=zcolor;
						
						// let ceshi2=[]
						// ceshi2[0] =  Math.round(res.data[this.Name[1].colorname].R)
						// ceshi2[1] =  Math.round(res.data[this.Name[1].colorname].G)
						// ceshi2[2] =  Math.round(res.data[this.Name[1].colorname].B)
						// ceshi2[3] = 1
						// let hcolor ="rgba("+ceshi2.toString()+")"
						// this.color1=hcolor;

						
						 this.value=res.data[this.Name[4].colorname]
						
						this.value1=res.data[this.Name[5].colorname]
						this.checked=res.data['Colors determined by sun position']
								
						// 	 }
						// 	 console.log('2222')
						// 		 let shuji=ceshi.toString();
						// 		 let ccc ="rgba("+shuji+")"
						// 		 this.color[i]=ccc;
							 
						//  }
						 
						
						 
						 
						 let cc =[]
						for(let i =0;i<4;i++){
							let colorValue="";
							 for(let j in res.data[this.Name[i].colorname]){
							 colorValue += res.data[this.Name[i].colorname][j]+",";
							 
							}
							if(colorValue.length >0){
								colorValue = colorValue.substr(0,colorValue.length -1);
							}
							
							let list ="rgba("+colorValue+")";
							cc[i]=list
							// this.color[i]=list[i]
						}
						
							
							for(let j =0;j<4;j++){
								this.Acolor[j].index=cc[j]
							}
							
							
						this.loading=false;
						
					},
					(err)=>{
						console.log("路径填写失败")
					}
					)
				}
				
				
				
			}
	    
	
	}
</script>

<style  >
	.contener{
		width: 100%;
		
	}
	.el-color-picker{
		width: 100%;
		margin-top: 10px;
	}
	.el-color-picker__trigger{
		width: 100%;
		height: 30px;
	}
	.block{
		width: 95%;
		color: aliceblue;
	}
	/* .input{
		margin-top: 2px;
		margin-bottom: 10PX;
		display: flex;
		justify-content: flex-start;
		margin-left: -10px;
	} */
	.el-collapse-item__header{
		background-color: #333A46;
		border-bottom: #333A46;
		color: #FFFFFF;
		text-align: center;
	}
	.el-collapse-item__content{
		background-color: #333A46;
		margin-left: 10px;
	}
	.el-collapse-item__wrap{
		background-color: #333A46;
	}
</style>
